<template>
    <img src="/home-img.png" class="home-img">

    <div class="register">
        <el-card>
            <el-form
                    :label-position="'top'"
                    label-width="100px"
                    :model="formLabelAlign"
                    style="max-width: 460px"
                    ref="ruleFormRef"
            >
                <el-form-item>
                    <h2>忘记密码</h2>
                </el-form-item>
                <el-form-item
                        prop="email"
                        label="邮箱"
                        :rules="[
        {
          required: true,
          message: '请输入邮箱',
          trigger: 'blur',
        },
        {
          type: 'email',
          message: '邮箱格式错误',
          trigger: ['blur', 'change'],
        },
      ]"
                >
                    <el-input v-model="formLabelAlign.email"/>
                </el-form-item>
                <el-form-item label="验证码" prop="code"
                              :rules="{required:true,message:'请输入5位验证码',trigger: 'blur'}">
                    <el-row>
                        <el-col :span="16">
                            <el-input v-model="formLabelAlign.code"/>
                        </el-col>
                        <el-col :span="1"></el-col>
                        <el-col :span="6">
                            <el-button type="primary" @click="getCode(ruleFormRef)">请求验证码</el-button>
                        </el-col>
                    </el-row>
                </el-form-item>
                <el-form-item label="新密码" prop="password"
                              :rules="{required:true,message:'请输入新密码',trigger: 'blur'}">
                    <el-input v-model="formLabelAlign.password"/>
                </el-form-item>
                <el-form-item>
                    <el-link @click="to('/login')">已有账号，前往登录</el-link>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit">提交</el-button>
                </el-form-item>
            </el-form>
        </el-card>
    </div>
</template>

<script setup>
import {reactive, ref} from "vue";
import {useRouter} from "vue-router";
import request from "@/request";
import {forgetPass, requestCode, updateUserInfo} from "@/request/user";
import {ElMessage} from "element-plus";

name = "PasswordView"

const router = useRouter();

const formLabelAlign = ref({
    email: '',
    code: '',
    password: ''
});

let time = -1;

const getCode = () => {
    let email = formLabelAlign.value.email
    if (!email) {
        ElMessage.error("请输入邮箱！");
        return;
    }
    if (!email.match(/^((?!\.)[\w-_.]*[^.])(@\w+)(\.\w+(\.\w+)?[^.\W])$/gm)) {
        ElMessage.error("邮箱格式错误！");
        return;
    }
    let l = (Date.now() - time) / 1000;
    if (time !== -1 && l < 60) {
        ElMessage.error("请求验证码失败，请" + Math.ceil(60 - l) + "秒后再次发送请求");
    } else {
        requestCode({email: formLabelAlign.value.email}).then(({data}) => {
            console.log(data);
        });
        ElMessage.success('请求验证码成功！');
        time = Date.now();
    }
};


const onSubmit = () => {
    for (let v in formLabelAlign.value) {
        if (v === '') {
            console.log("error submit!");
            return;
        }
    }
    forgetPass(formLabelAlign.value).then(({data}) => {
        if (data.code === 200) {
            ElMessage.success("密码修改成功");
            router.push("/")
        }
    })
    console.log('submit!')
};

const ruleFormRef = ref();



const to = (path) => {
    router.push(path);
};
</script>

<style scoped>
.register {
    font-size: 16px;
    max-width: 350px;
    min-width: 200px;
    text-align: center;
    margin: 100px auto;
}

.el-link .el-icon--right.el-icon {
    vertical-align: text-bottom;
}

.home-img {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: -9999;
}
</style>

